<!-- dialog部门组件 -->
<template>
  <el-dialog :title="form.id ? '编辑部门' : '新增部门'" :visible="dialogShow">
    <h1>{{ deptId }}</h1>
    <el-form :model="form" label-width="100px" :rules="Deprules" ref="addRef">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择" class="kk">
          <el-option v-for=" item in userList" :key="item.id" :label="item.username" :value="item.username">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit_btn">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
// 导入操作组织架构的数据
import { getDepListApi, addDeptApi, getDeptDetailApi, updateDeptApi } from '@/api/departments'
// 员工管理
import { getSimpleListApi } from '@/api/employees'
// getDepListApi
export default {
  // 从外界传入，由该页面index控制
  // deptId 当前操作部门的id
  props: ['dialogShow', 'deptId'],
  data () {
    return {
      // 负责人列表
      userList: [],
      // 表单数据源
      form: {
        // 部门名称
        name: '',
        // 部门编码
        code: '',
        // 部门负责人
        manager: '',
        // 部门介绍
        introduce: ''
      },
      // 表单校验规则
      Deprules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
          // 自定义校验规则 子级部门中禁止出现重复部门
          {
            validator: async (rules, value, callback) => {
              // 新增部门 和 编辑部门的 校验规则要不一致，在此处作区分(通过判断是否数据项里带ID,如果带就是编辑 不带就是新增)
              if (this.form.id) {
                // 设置编辑的规则
                // 得到数据源
                const res = await getDepListApi()
                // 得到当前编辑部门的所有同级部门数据(pid相同的为同级部门)
                const newArr = res.data.depts.filter(item => {
                  return item.pid === this.form.pid
                })
                // 判断value是否跟同级部门中的名称冲突（除掉自己）
                const bool = newArr.some(item => {
                  // 当前遍历的name为选中name的值 且 当前遍历的id项不为当前选中的id项
                  // 如果满足，则返回true 证明确实是当前选中项不是自己
                  return item.name === value && item.id !== this.form.id
                })
                // 既然不是自己，那就不能把这个待修改的改为一个已经存在的部门
                bool ? callback(new Error('同级部门名称不能重复')) : callback()
                // 返回结果 
              } else {
                // value: 要检验的数据
                // callback：回调函数
                // 校验通过：callback()
                // 校验不通过:callback(new Error('信息'))

                // 得到数据
                const res = await getDepListApi()

                // 筛选子部门
                const sonArr = res.data.depts.filter(item => {
                  return item.pid === this.deptId
                })
                console.log(88888)
                // 遍历子部门,判断是否存在部门名称与value相同的名称
                // .some 查找数组item中是否有其中name项 === value项 如果有就返回true
                const bool = sonArr.some(item => {
                  return item.name === value

                })

                if (bool) {
                  callback(new Error('部门名称不能重复'))
                  console.log(6666)
                } else {
                  callback()
                }
              }
            }, trigger: 'blur'

          }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
          {
            validator: async (rules, value, callback) => {
              if (this.form.id) {
                const res = await getDepListApi()
                // 判断数据中是否存在相同的code （要除掉自己）
                // 因为编码是全局唯一，所以直接用some函数即可
                const bool = res.data.depts.some(item => {
                  return item.code === value && item.id !== this.form.id
                })
                bool ? callback(new Error('部门编码不能重复')) : callback()
              } else { // 获取所有部门数据
                const res = await getDepListApi()
                // 判断是否存在与此相同的code
                const bool = res.data.depts.some(item => {
                  return item.code === value
                })
                if (bool) {
                  callback(new Error('部门编码重复'))
                } else {
                  callback()
                }
              }
              // 获取所有部门数据
              const res = await getDepListApi()
              // 判断是否存在与此相同的code
              const bool = res.data.depts.some(item => {
                return item.code === value
              })
              if (bool) {
                callback(new Error('部门编码重复'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' },
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel () {
      // 关闭面板 因为单向性，所以必须由父组件发指令
      this.$emit('update:dialogShow', false),
        // 清除数据
        this.form = {
          // 部门名称
          name: '',
          // 部门编码
          code: '',
          // 部门负责人
          manager: '',
          // 部门介绍
          introduce: ''
        },
        // 重置表单校验
        this.$refs.addRef.resetFields()
    },
    // 得到所有负责人列表
    async getSimpleListApi () {
      const res = await getSimpleListApi()
      this.userList = res.data
      console.log(res)
    },
    // 提交按钮
    submit_btn () {
      // 添加表单全局验证
      this.$refs.addRef.validate(async valid => {

        if (valid) {
          if (this.form.id) {
            // 编辑模式提交
            const res = await updateDeptApi(this.form)
            //提示 修改成功 关闭面板 清除数据 更新数据
            this.$message.success('数据修改成功')
            this.$emit('update:dialogShow', false)
            this.form = {
              // 部门名称
              name: '',
              // 部门编码
              code: '',
              // 部门负责人
              manager: '',
              // 部门介绍
              introduce: ''
            },
              this.$emit('updatedata')
          } else {
            const res = await addDeptApi({
              ...this.form,
              // 如果是添加一级部门  可以从 deptId上判断 如果符合一级部门则为一级 设为空
              // 如果不是则用当前deptId为pid
              pid: this.deptId == '604e115c7bfcfa45d019d3e9' ? '' : this.deptId
            })
            // 提交新增数据到服务器

            // 后续 关闭面板 提示成功 清空表单 更新数据
            this.$emit('update:dialogShow', false)
            this.$message.success('新增部门成功')
            this.form = {
              // 部门名称
              name: '',
              // 部门编码
              code: '',
              // 部门负责人
              manager: '',
              // 部门介绍
              introduce: ''
            },
              //必须在父组件的调用子组件处写上这个函数
              this.$emit('updatedata')
          }
        } else {
          this.$message.error('对不起数据格式不规范')

        }




      })
    },
    // 得到当前编辑的部门详情
    async getDeptDeail (id) {
      const res = await getDeptDetailApi(id)
      // 把数据渲染到dialog上
      this.form = res.data
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    // 打开页面后就获取管理人员数据
    this.getSimpleListApi()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
</style>